建立購物車元件

Vue 3 應用程式

刪除了 components/ 資料夾中所有檔案。
在 components/ 目錄底下建立 ShoppingCart.vue。

<script setup lang="ts">
</script>

<template>
   <p>Shopping Cart</p>
</template>

<style scoped>
</style>

模板中包含一個顯示 "Shopping Cart" 的段落元素。

更新 App.vue 來修正無法編譯的錯誤：

// App.vue
<script setup lang="ts">
import ShoppingCart from './components/ShoppingCart.vue'
</script>

<template>
 <ShoppingCart />
</template>

SvelteKit 應用程式

在 lib/ 資料夾中建立 shopping-cart.svelte。

// shopping-cart.svelte
<script lang="ts">
</script>

<p>Shopping Cart</p>

模板中包含一個顯示 "Shopping Cart" 的段落元素。

從 index.ts 匯出 shopping-cart.svelte：

// index.ts
export * from './shopping-cart.svelte';

更新 +page.svelte 以包含 ShoppingCart 元件：

// +page.svelte
<script lang="ts">
   import ShoppingCart from '$lib/shopping-cart.svelte';
</script>

<ShoppingCart />

Angular 19 應用程式

使用 Angular CLI 產生 ShoppingCartComponent，會建立以下檔案：
shopping-cart.component.html, shopping-cart.component.ts, shopping-cart.component.scss, shopping-cart.component.spect.ts。

指令如下：

ng g c shopping-cart/shoppingCart --flat

這裡使用內嵌模板（inline template）方式，因此刪除以下檔案：
shopping-cart.component.html, shopping-cart.component.scss, shopping-cart.component.spect.ts。

元件程式碼如下，模板中包含一個顯示 "Shopping Cart" 的段落元素：

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
 selector: 'app-shopping-cart',
 imports: [],
 template: `
   <p>Shopping Cart</p>
 `,
 changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShoppingCartComponent {}

將 ShoppingCartComponent 加入到 AppComponent 的 imports 陣列：

// app.component.ts
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';

@Component({
 selector: 'app-root',
 imports: [ShoppingCartComponent],
 template: '<app-shopping-cart />',
 changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {}

我們已成功建立 ShoppingCart 元件並將它顯示在應用程式中。

資源

• Github 專案：
  • https://github.com/railsstudent/fundamental-vue3
  • https://github.com/railsstudent/fundamental-angular
  • https://github.com/railsstudent/fundamental-svelte
• Github Pages：
  • https://railsstudent.github.io/fundamental-vue3/
  • https://railsstudent.github.io/fundamental-angular
  • https://railsstudent.github.io/fundamental-svelte